<template>
  <a-modal
    :title="form.id ? '编辑' : '新增'"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="文化名称" ref="cultureName" prop="cultureName" v-if="form.id ? false : true">
            <a-select v-model="form.cultureName">
              <a-select-option  v-for="(tmp,index) in cultureName" :value="tmp.value" :key="index">
                {{tmp.name}}
              </a-select-option>
            </a-select>
        </a-form-model-item>
        <a-form-model-item  label="界面文化名称" ref="uiCultureName" prop="uiCultureName" v-if="form.id ? false : true">
            <a-select v-model="form.uiCultureName">
              <a-select-option  v-for="(tmp,index) in cultureName" :value="tmp.value" :key="index">
                {{tmp.name}}
              </a-select-option>
            </a-select>
        </a-form-model-item>
        <a-form-model-item label="显示名称" ref="displayName" prop="displayName">
          <a-input
            v-model="form.displayName"
            placeholder="请输入显示名称"
          />
        </a-form-model-item>
        <a-form-model-item label="旗帜图标" ref="flagIcon" prop="flagIcon">
            <a-select v-model="form.flagIcon">
              <a-select-option  v-for="(tmp,index) in cultureIconName" :value="tmp.value" :key="index">
                {{tmp.name}}
              </a-select-option>
            </a-select>
        </a-form-model-item>
        <a-form-model-item label="已启用" ref="isEnabled" prop="isEnabled">
            <a-checkbox v-model="form.isEnabled" name="在发现文档中显示" @change="handleSChange">
            </a-checkbox>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { createLang } from "@/services/languageServer/languageServer";
export default {
  name: "TenantForm",
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 10 },
      visible: false,
      confirmLoading: false,
      form: {},
      rules: {
        displayName: [
          { required: true, message: "名称必须填写", trigger: "blur" },
        ],
        cultureName: [
          { required: true, message: "名称必须填写", trigger: "blur" },
        ],
        uiCultureName: [
          { required: true, message: "名称必须填写", trigger: "blur" },
        ],
      },
      cultureName: [
        { name: 'Afar', value: 'aa'},
        { name: 'Afar (Djibouti)', value: 'aa-DJ'},
        { name: 'Afar (Eritrea)', value: 'aa-ER'},
        { name: ' Afar (Ethiopia)',  value: 'aa-ET'},
      ],
      cultureIconName: [
        { name: 'Afghanistan', value: 'af'},
        { name: 'land Islands', value: 'ax'},
        { name: 'Albania', value: 'al'},
        { name: 'Algeria',  value: 'dz'},
      ],
    };
  },
  created() {
  },
  methods: {
    handleSChange(e) {
      this.form.isEnabled  = e.target.checked;
    },
    handleChangeFei(value) {
        this.form.valueType = value
    },
    handleChange(e) {
      this.form.required  = e.target.checked;
    },
    openModal(model){
      this.visible = true;
      this.form = model
      if(model && model.id){
        this.propId = model.id
      }
    },
    resetForm() {
      this.form = {};
    },
    handleCancel() {
      this.visible = false
      this.currentStep = 0
    },
    handleOk() {
      const form = this.$refs.ruleForm;
      this.confirmLoading = true;
      form.validate((valid) => {
        if (valid) {
          let values = this.form;
          createLang(values)
            .then((res) => {
              this.visible = false;
              form.resetFields();
              this.$message.info("操作成功");
              this.$emit('ok')
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
    }
  },
};
</script>

<style scoped>
</style>